<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<!--
	变换矩阵 二维3x3  三维4x4  (1)默认值
	[a c e     含义  ：a水平缩放(1),c垂直倾斜(0),e水平位移(0)
	 b d f			  b水平倾斜(0) ,d垂直缩放(1),f垂直位移(0)
	 0 0 1]
		
		CSS3 transform 属性
		函数transform(a,b,c,d,e,f)
		
		
		
		
		
		
		
		
	-->

<script>
		var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =880;
	var context=canvas.getContext('2d');
  context.fillStyle='red';
	context.strokeStyle='#058';
	context.lineWidth=5;
	
	context.save();
	context.transform(1,0,0,1,0,0);//单位矩阵（初始值）
	context.transform(2,0.2,0.2,1.5,50,80);//变换矩阵 a b c d e f 是在之前的基础上 会产生级联的效果
	context.setTransform(2,-0.2,-0.2,1.5,50,100); // 一次性修改值setTransform
	context.fillRect(50,50,300,300);//绘制矩形
	context.strokeRect(50,50,300,300);
	context.restore();
	
	
</script>
</html>
